<template>
  <div class="info-card" @click="checkDetails">
    <div class="icon box-shadow-lottery" :style="bg">
      <icon-svg class="svg" :iconClass="lotteryInfo.icon"></icon-svg>
    </div>
    <div class="context">
      <p class="context-name">{{lotteryInfo.type}}</p>
      <p class="context-time">
        <count-down :timeStamp="lotteryInfo.drawTime" :fontSize="14"></count-down>
      </p>
    </div>
  </div>
</template>

<script>
import CountDown from '@/components/base/count-down/count-down'
export default {
  components: {
    CountDown
  },
  props: {
    lotteryInfo: {
      type: Object,
      default: function() {
        return {
          id: 1,
          type: '重庆时时彩',
          dateNo: '119217',
          drawTime: new Date().getTime() + 1000000,
        }
      }
    }
  },
  data() {
    return {
      drawTime: '00:00:00'
    }
  },
  methods: {
    checkDetails() {
      this.$router.push({path: this.lotteryInfo.path})
    }
  },
  computed: {
    bg() {
      return `background: url(${this.lotteryInfo.bg}) no-repeat center / cover`
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .info-card
    display flex
    width calc((100% - 10px) / 2)
    height 72px
    align-items center
    background #fff
    box-sizing border-box
    border-radius 3px
    box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.1)
    &.active 
      border 1px solid rgba(219, 211, 211, 1)
      box-shadow 0px 3px 6px 0px rgba(0, 0, 0, 0.1)
      border-radius 3px 
    .icon
      width 48px
      height 48px
      display flex 
      align-items center
      justify-content center
      border-radius 50%
      margin 0 12px
      font-size 44px
    .context
      .context-name
        font-size 15
        height 12px
      .context-time
        margin-top 10px
        font-weight bold 
      .context-time >>> .comma 
        margin-right -5px 
        margin-left -5px 
</style>